import React, { useMemo, useState } from 'react';
import {
  DndContext,
  useDraggable,
  useSensor,
  MouseSensor,
  TouchSensor,
  KeyboardSensor,
  PointerActivationConstraint,
  Modifiers,
  useSensors,
} from '@dnd-kit/core';

import DraggableItem from '@/components/Draggable';


const defaultCoordinates = {
  x: 0,
  y: 0,
};


function DraggableStory({
  activationConstraint,
  modifiers,
  style,
}) {
  const [{ x, y }, setCoordinates] = useState(defaultCoordinates);
  const mouseSensor = useSensor(MouseSensor, {
    activationConstraint,
  });
  const touchSensor = useSensor(TouchSensor, {
    activationConstraint,
  });
  const keyboardSensor = useSensor(KeyboardSensor, {});
  const sensors = useSensors(mouseSensor, touchSensor, keyboardSensor);

  return (
    <DndContext
      sensors={sensors}
      onDragEnd={({ delta }) => {
        setCoordinates(({ x, y }) => {
          return {
            x: x + delta.x,
            y: y + delta.y,
          };
        });
      }}
      modifiers={modifiers}
    >
      <div>
        <DraggableItem
          style={{...style,left:x,top:y}}
          id="sad"
        >
          <span style={{ color: "#fff" }}>
            test
          </span>
        </DraggableItem>
      </div>
    </DndContext>
  );
}



const BasicSetup = () => <DraggableStory activationConstraint={{
  distance: 15,
}} />;
export default BasicSetup